<template>
  <div class="reMember-container">
    <div class="header">
       <div class="title">党员花名册</div>
    </div>
    <div style="margin: 20px 0;gap: 20px;" class="data-table-container">
      <el-card class="padding-10">
        <el-row :gutter="20">
          <el-col :xs="9" :sm="12">
            <div style="display: flex;">
               <div style="width: 200px">
                 <el-select v-model="partRequest.part" clearable placeholder="请选择支部">
                   <el-option v-for="item in selectList.branchList" :key="item.id" :label="item.committeeName" :value="item.id"></el-option>
                 </el-select>
               </div>

              <div style="width: 200px;margin-left: 20px">
              <el-select v-model="partRequest.depart" clearable placeholder="请选择科室">
                <el-option v-for="item in selectList.departmentList" :key="item.id" :label="item.departMenName" :value="item.id"></el-option>
              </el-select>
              </div>
            </div>
          </el-col>
          <el-col :xs="15" :sm="12">
            <div class="flex align-center justify-content-end">
              <el-button type="primary" icon="Plus" style="margin: 0 10px"  @click="handleAdd">新增党员</el-button>
              <el-button icon="download" style="margin: 0 10px">导出</el-button>
            </div>
          </el-col>
        </el-row>
        <el-table :data="tableData"  style="width: 100%;margin-top: 10px;padding-bottom: 20px">
          <el-table-column align="center" prop="num" label="姓名" />
          <el-table-column align="center" prop="num" label="所属科室" />
          <el-table-column align="center" prop="drg" label="所属支部" />
          <el-table-column align="center" prop="cost1" label="党内职务"/>
          <el-table-column align="center" prop="status" label="入党时间" />
          <el-table-column align="center" prop="cmi" label="联系方式" />
          <el-table-column align="center" prop="cost2" label="党员状态" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="position:relative; padding-bottom: 20px">
          <pagination
              :total="Number(tableData.length)"
              v-model:page="partRequest.skipCount"
              v-model:limit="partRequest.maxResultCount"
              @pagination="getCancerIndicatorList" />
        </div>
      </el-card>
    </div>

    <!-- 新增/编辑弹框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle"  @close="onDialogClose">
      <el-form ref="formRef" :model="formData" :rules="rules" label-position="top" >
        <!-- 第一行：选择用户、姓名 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="选择用户" prop="userId">
              <el-select v-model="formData.userId" placeholder="请选择系统用户" style="width: 100%;">
                <el-option label="用户1" value="1"></el-option>
                <el-option label="用户2" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="formData.name" placeholder="请输入党员真实姓名" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行：性别、工号 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-select v-model="formData.gender" placeholder="请选择性别" style="width: 100%;">
                <el-option label="男" value="male"></el-option>
                <el-option label="女" value="female"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工号" prop="workId">
              <el-input v-model="formData.workId" placeholder="请输入对应的工号" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第三行：联系方式、所属科室 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系方式" prop="phone">
              <el-input v-model="formData.phone" placeholder="请输入11位手机号" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属科室" prop="department">
              <el-select v-model="formData.department" placeholder="请选择科室" style="width: 100%;">
                <el-option v-for="item in selectList.departmentList" :key="item.id" :label="item.departMenName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第四行：所属支部、党内职务 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属支部" prop="branch">
              <el-select v-model="formData.branch" placeholder="请选择支部" style="width: 100%;">
                <el-option v-for="item in selectList.branchList" :key="item.id" :label="item.committeeName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="党内职务" prop="position">
              <el-select v-model="formData.position" placeholder="请选择职务" style="width: 100%;">
                <el-option v-for="item in selectList.positionList" :key="item.id" :label="item.positionName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第五行：入党时间、党员状态 -->
        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item label="入党时间" prop="joinDate">
              <el-date-picker v-model="formData.joinDate" type="date" placeholder="选择日期" format="YYYY/MM/DD" value-format="YYYY-MM-DD" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="党员状态" prop="status">
              <el-select v-model="formData.status" placeholder="请选择状态" style="width: 100%;">
                <el-option v-for="item in selectList.partyStatusList" :key="item.id" :label="item.stateName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>

      <!-- 弹框底部按钮 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">重置</el-button>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>
<script setup>
import {ref} from 'vue';
import {GetFunctionSurgery} from "@/api/quality/feature.js";
import {
  getPBCommitteeList,
  getPBDepartMentList,
  getPBPositionList,
  getPBStateList
} from "@/api/partyMemberInfo/partyMemberInfo.js";
const tableData = ref([
  {
    name: '第一支部',
    num: 328,
    drg: 12,
    cost1: 13245,
    status: '↓6.8%',
    cmi: '1.32',
    cost2: '12876',
    pay: '+￥369'
  },
  {
    name: '第一支部',
    num: 328,
    drg: 12,
    cost1: 13245,
    status: '↑6.8%',
    cmi: '1.62',
    cost2: '12876',
    pay: '+￥169'
  },
  {
    name: '第一支部',
    num: 328,
    drg: 12,
    cost1: 13245,
    status: '↑6.8%',
    cmi: '4.32',
    cost2: '12876',
    pay: '-￥319'
  },
  {
    name: '第一支部',
    num: 328,
    drg: 12,
    cost1: 13245,
    status: '↓6.8%',
    cmi: '1.72',
    cost2: '12876',
    pay: '+￥219'
  },{
    name: '第一支部',
    num: 328,
    drg: 12,
    cost1: 13245,
    status: '↓6.8%',
    cmi: '2.2',
    cost2: '12876',
    pay: '-￥239'
  },
]);

const selectList = ref({
  departmentList: [], // 科室
  branchList: [], // 支部
  positionList: [], // 职位
  partyStatusList: [] // 党员状态信息
});




const partRequest = ref({
      part: '', // 支部
      depart: '', // 科室
      skipCount: 1, // 当前页
      maxResultCount: 10 // 一页的数据量
    });

// 弹框控制
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref(null)// 表单引用
const formData = reactive({
  userId: '',
  name: '',
  gender: '',
  workId: '',
  phone: '',
  department: '',
  branch: '',
  joinDate: '',
  position: '',
  status: ''
});
// 表单校验规则
const rules = {
  userId: [{ required: true, message: '请选择用户', trigger: 'change' }],
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  workId: [{ required: true, message: '请输入工号', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
  department: [{ required: true, message: '请选择科室', trigger: 'change' }],
  branch: [{ required: true, message: '请选择支部', trigger: 'change' }],
  joinDate: [{ required: true, message: '请选择入党时间', trigger: 'change' }],
  position: [{ required: true, message: '请选择党内职务', trigger: 'change' }],
  status: [{ required: true, message: '请选择党员状态', trigger: 'change' }]
}

// 获取肿瘤专业医疗质量控制指标列表
const getCancerIndicatorList = (pageData) => {
  console.log("page",cancerIndicator.value)
};

// 编辑按钮
const handleEdit = (row) => {
  dialogTitle.value = '编辑党员信息'
  Object.assign(formData, row)
  dialogVisible.value = true
};


// 新增按钮
const handleAdd = () => {
  dialogTitle.value = '新增党员信息'
  Object.assign(formData, {
    userId: '',
    name: '',
    gender: '',
    workId: '',
    phone: '',
    department: '',
    branch: '',
    joinDate: '',
    position: '',
    status: ''
  })
  dialogVisible.value = true
}


// 提交表单
const submitForm = () => {
  formRef.value.validate(valid => {
    if (valid) {
      console.log('提交数据:', formData)
      // 这里可以调用 API 提交数据
      dialogVisible.value = false
    } else {
      console.log('表单校验失败')
    }
  })
}

// 弹框关闭时重置表单
const onDialogClose = () => {
  formRef.value.resetFields()
}



// API 接口调试

// 获取科室信息
const getPBDepartMent= async () => {
  let result = await getPBDepartMentList();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    selectList.value.departmentList = data
  }
}
// 获取支部信息
const getPBCommittee = async () => {
  let result = await getPBCommitteeList();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    selectList.value.branchList = data
  }
}

// 获取职务信息
const getPBPosition = async () => {
  let result = await getPBPositionList();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    selectList.value.positionList = data
  }
}

// 获取职务信息
const getPBState = async () => {
  let result = await getPBStateList();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    selectList.value.partyStatusList = data
  }
}



getPBDepartMent();
getPBCommittee();
getPBPosition();
getPBState();



</script>
<style lang='scss' scoped>
.reMember-container {
  height: 100%;
  padding-top: 20px;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin:0 20px;
  .header {
   border-radius: 5px;
    background-color: #FFFFFF;
    padding:5px 10px;
    .title{
      position: relative;
      left: -10px;
      bottom: -5px;
      width: 110px;
      text-align: center;
      border-bottom: 2px solid #F0434A;
      padding: 0px 0 5px 0;
      color: #F0434A;
      font-size: 14px;
    }
  }
}



</style>
